<template>
	<view class="myOrderDetail">
		<view class="detail-box">
			<view class="detail-content" v-if="isPaying(detail.terminalOrderStatus) || isWaiting(detail.terminalOrderStatus)">
				<view class="title">
					<image class="image" src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/JxPPFgmHgF_pos_icon.png"></image>
					<view class="title-main">
						<text class="title-main_name">{{detail.receiverName}}</text>
						<text class="title-main_phone">{{detail.phone}}</text>
					</view>
					<view class="title-sub">{{detail.province}} {{detail.city}} {{detail.area}} {{detail.address}}</view>
				</view>
				<view class="subtotal">
					<view class="order-btn" @click="editAddress" v-if="isPaying(detail.terminalOrderStatus)">修改</view>
				</view>
			</view>
		</view>
		
		<view class="detail-box detail-box-2">
			<view class="item-content">
				<image class="image" :src="detail.imgUrl"></image>
				<view class="title">
					<view class="title-main">{{detail.goodsName}}</view>
					<view class="title-sub">{{detail.brandName}}</view>
				</view>
				<view class="subtotal">
					<view class="subtotal-price">￥{{detail.price}}</view>
					<view class="subtotal-unite">X{{detail.quantity}}</view>
				</view>
			</view>
			<view class="item-coupons">
				<text class="item-coupons__name">购机券抵扣</text>
				<text class="item-coupons__total">- ¥{{detail.touchMoney}}</text>
			</view>
			<view class="item-payment">
				<!-- <text class="item-payment__coupon">总价￥198.00, 优惠￥50.00</text> -->
				<text class="item-payment__name">实付款</text>
				<text class="item-payment__total">￥{{detail.realPay}}</text>
			</view>
		</view>
		<view class="detail-box detail-box-2">
			<view class="detail-info__title">订单信息</view>
			<view  v-if="isRecived(detail.terminalOrderStatus)">收货信息：{{detail.province}} {{detail.city}} {{detail.area}} {{detail.address}}</view>
			<view class="detail-info__serial">
				<text class="serial-btn" @click="copy(detail.orderNo)">复制</text>
				<text class="serial-number">订单编号：{{detail.orderNo}}</text>
			</view>
			<view class="detail-info__time" v-if="!isPaying(detail.terminalOrderStatus)">支付方式: {{detail.payType=='WX' ? '微信' : '未知'}}</view>
			<view class="detail-info__time">创建时间：{{detail.createDate}}</view>
			<view class="detail-info__time" v-if="!isPaying(detail.terminalOrderStatus)">付款时间：{{detail.payTime||'暂无'}}</view>
			<view class="detail-info__time" v-if="isReply(detail.terminalOrderStatus)">发货时间：{{detail.payTime||'暂无'}}</view>
			<view class="detail-info__time" v-if="isReply(detail.terminalOrderStatus)">成交时间：{'--'}}</view>
			<view class="detail-info__time" v-if="isRecived(detail.terminalOrderStatus)">收货方式：{{detail.expressCompany}}</view>
			<view class="detail-info__time" v-if="isRecived(detail.terminalOrderStatus)">物流单号：{{detail.expressNo}}</view>
		</view>
		<view class="bottom-bar">
			<view class="order-btn" v-if="isPaying(detail.terminalOrderStatus)" @click.stop="orderDelete()">删除订单</view>
			<view class="order-btn order-btn-orange" v-if="isPaying(detail.terminalOrderStatus)" @click.stop="pay()">立即付款</view>
			<view class="order-btn" v-if="isWaiting(detail.terminalOrderStatus)">提醒发货</view>
			<view class="order-btn order-btn-orange" v-if="isRecived(detail.terminalOrderStatus)" @click.stop="orderConfirm()">确认收货</view>
			<view class="order-btn order-btn-orange" v-if="isReply(detail.terminalOrderStatus)">评价</view>
		</view>
		
		<u-modal v-model="confirmShow" :content="confirmContent" @confirm="confirm"></u-modal>
		<u-popup v-model="buyBox" mode="bottom" border-radius="40">
			<view class="goods-buy">
				<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/CoNFXgIOmf_open_icon.png" style="width: 28rpx;height: 28rpx;" mode=""></image>
				<view class="pay-total">￥{{detail.realPay}}</view>
				<view class="num-box">
					<view class="label-gray">付款方式</view>
					<view class="">{{detail.payType=='WX' ? '微信' : '未知'}}</view>
				</view>
				<view class="complete">
					<button class="btn" @click="goPay">立即支付</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { submitAgainApi, editStatusApi, orderDeleteApi,orderDetailApi } from "@/api/orders.js"
	export default {
		data() {
			return {
				orderId: 0,
				detail: {},
				
				confirmShow: false,
				confirmTitle: '一经确认，无法修改',
				confirmContent: '请确定收到商品？',
				buyBox: false,
			};
		},
		onLoad(options) {
			this.orderId = options.id
			this.getOrderDetail()
		},
		methods: {
			// 获取订单详情
			async getOrderDetail(){
				let params ={
					id: this.orderId
				}
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await orderDetailApi(this.orderId)
				if(res.statusCode === 200){
					uni.hideLoading()
					this.detail = res.data.data
				}
			},
			copy(str){
				uni.setClipboardData({
					data:str
				})
			},
			editAddress() {
				this.unOpen()
			},
			unOpen() {
				uni.showToast({
					title:'暂未开放',
					icon:"none"
				})
			},
			// 返回上一页
			previous() {
				uni.switchTab({
					url:"/pages/main/homePages"
				})
			},
			isPaying(status) {
				console.log(status)
				return status == 'PAYING'
			},
			isWaiting(status) {
				return status == 'WAITING' || status == 'CONFIRM' || status == 'WAITING_SEND'
			},
			isRecived(status) {
				return status == 'SEND_OUT'
			},
			isReply(status) {
				return status == 'SIGNED_IN' || status == 'OFFLINE_DEAL'
			},
			
			// 确认收货
			orderConfirm() {
				this.confirmShow = true
			},
			async confirm() {
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await editStatusApi(this.orderId, {terminalOrderStatus: 'SIGNED_IN'})
				if(res.statusCode === 200){
					uni.hideLoading()
					this.detail.terminalOrderStatus = 'SIGNED_IN'
					this.getOrderDetail()
				} else {
					uni.showToast({
						title:'操作失败',
						icon:"none"
					})
				}
			},
			async orderDelete() {
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await orderDeleteApi(this.orderId)
				if(res.statusCode === 200){
					uni.hideLoading()
					uni.showToast({
						title:'删除成功',
						icon:"none",
						success() {
							setTimeout(()=>{
								uni.redirectTo({
									url:'/pages/my/orders'
								})
							},1000)
						}
					})
				} else {
					uni.showToast({
						title:'删除失败',
						icon:"none"
					})
				}
			},
			pay() {
				this.buyBox = true
				return false
			},
			async goPay() {
				const self = this
				try{
					let params = {
						applicationType:'APP',
						id:this.orderId,
					}
					uni.showLoading({
						title:"正在加载中...."
					})
					const res = await submitAgainApi(params)
					if(res.statusCode ==200){
						uni.hideLoading()
						
						uni.showLoading({
							title:"支付中...."
						})
						let pay = {
							"appid": res.data.data.appid,
							"partnerid": res.data.data.partnerid,
							"timestamp": res.data.data.timestamp,
							"noncestr": res.data.data.noncestr,
							"prepayid": res.data.data.prepayid,
							"package": res.data.data.package,
							"sign": res.data.data.sign,
						}
						uni.showLoading({
							title: "支付中...."
						})
						wx.getProvider({
							service: 'payment',
							success: function(data) {
								if (~data.provider.indexOf('wxpay')) {
									uni.hideLoading()
									wx.requestPayment({
										provider: 'wxpay',
										orderInfo: pay,
										success: (r) => {
											uni.showToast({
												title: "支付成功!",
												icon: "success"
											})
											setTimeout(() => {
												uni.switchTab({
													url: "/pages/main/homePages"
												})
											}, 1000)
										},
										fail: (err) => {
											uni.hideLoading()
											if (err.errMsg.indexOf("cancel") > -1) {
												uni.showToast({
													title: "已取消支付!",
													icon: "none",
												})
												setTimeout(() => {
													uni.redirectTo({
														url: "/pages/my/orders?type=PAYING"
													})
												}, 1000)
											} else {
												uni.showToast({
													title: err.errMsg,
													icon: "none"
												})
											}
										}
									})
								}
							}
						})
					}
				}catch(e){
					console.log(e)
					uni.showToast({
						title:"支付失败，请重新支付！",
						icon:"none"
					})
					uni.hideLoading()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.myOrderDetail {
		min-height: 100vh;
		background: #F7F7F7;
		padding:1rpx 30rpx 150rpx;
		.detail-box {
			background: #FFFFFF;
			border-radius: 30rpx;
			padding: 30rpx 20rpx;
			margin-top: 30rpx;
			&-2 {
				padding: 30rpx;
			}
			.detail-content {
				display: flex;
				.title {
					flex: 1;
					position: relative;
					box-sizing: border-box;
					padding-left: 84rpx;
					.image {
						position: absolute;
						height: 64rpx;
						width: 64rpx;
						top: 50%;
						margin-top: -32rpx;
						left: 0;
					}
					&-main {
						font-size: 30rpx;
						color: #010101;
						&__name {
							font-size: 32rpx;
							color: #333333;
							font-weight: bold;
						}
						&_phone {
							font-size: 28rpx;
							color: #999999;
						}
					}
					&-sub {
						font-size: 24rpx;
						color: #999999;
						margin-top: 20rpx;
					}
				}
				.subtotal {
					min-width: 160rpx;
					padding-left: 20rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					&-price {
						font-size: 28rpx;
						text-align: right;
						color: #666666;
					}
					&-unite {
						font-size: 24rpx;
						color: #999999;
						margin-top: 32rpx;
						text-align: right;
					}
				}
			}
			.item-content {
				display: flex;
				.image {
					height: 180rpx;
					width: 180rpx;
					margin-right: 20rpx;
				}
				.title {
					flex: 1;
					&-main {
						font-size: 30rpx;
						color: #010101;
					}
					&-sub {
						font-size: 24rpx;
						color: #999999;
						margin-top: 29rpx;
					}
				}
				.subtotal {
					min-width: 160rpx;
					padding-left: 20rpx;
					box-sizing: border-box;
					&-price {
						font-size: 28rpx;
						text-align: right;
						color: #666666;
					}
					&-unite {
						font-size: 24rpx;
						color: #999999;
						margin-top: 32rpx;
						text-align: right;
					}
				}
			}
			.item-coupons {
				margin-top: 40rpx;
				padding: 0 10rpx;
				&__name {
					font-size: 26rpx;
					color: #000000;
				}
				&__total {
					font-size: 26rpx;
					color: #F16240;
					float: right;
				}
			}
			.item-payment {
				margin-top: 30rpx;
				text-align: right;
				&__name {
					font-size: 30rpx;
					color: #000000;
					font-weight: bold;
					margin-right: 8rpx;
				}
				&__total {
					font-size: 26rpx;
					color: #F16240;
				}
			}
			.detail-info {
				color: #000000;
				&__title {
					font-size: 30rpx;
					line-height: 30rpx;
					font-weight: bold;
				}
				&__serial {
					margin-top: 44rpx;
					.serial-number {
						line-height: 24rpx;
						font-size: 24rpx;
						display: block;
					}
					.serial-btn {
						width: 50rpx;
						color: #F16240;
						float: right;
						line-height: 24rpx;
						font-size: 24rpx;
					}
				}
				&__time {
					margin-top: 31rpx;
					line-height: 24rpx;
					font-size: 24rpx;
					display: block;
				}
			}
		}
		.bottom-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 98rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-right: 30rpx;
		}
		.order-btn {
			border: 1rpx solid #999999;
			padding: 16rpx 32rpx;
			font-size: 28rpx;
			color: #666666;
			text-align: center;
			line-height: 28rpx;
			border-radius: 30rpx;
			display: inline-block;
			&-orange {
				color: #F16240;
				border-color: #F16240;
			}
			&+.order-btn {
				margin-left: 20rpx;
			}
		}
		.goods-buy{
			width: 100%;
			height: 680rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 30rpx 30rpx 0;
			.pay-total {
				text-align: center;
				font-size: 45rpx;
				font-weight: bold;
				margin-top: 43rpx;
			}
			.num-box{
				width: 100%;
				height: 200rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 34rpx;
				.label-gray {
					color: #999999;
				}
			}
			.complete {
				margin-top: 140rpx;
			}
			.btn {
				background: #F05329;
				border: none;
				border-radius: 10rpx;
				color: #fff;
				line-height: 80rpx;
			}
		}
	}
</style>
